<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-white border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
            }
            .nav-item {
                @apply px-4 py-2 rounded-lg transition-all hover:bg-primary/10 cursor-pointer;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .form-input {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
            }
            .badge {
                @apply px-2 py-1 text-xs rounded-full;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">黄淮学院</h1>
                        <p class="text-xs text-info">校园活动管理系统</p>
                    </div>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-2">
                    <a href="index.html" class="nav-item nav-item-active">首页</a>
                    <a href="activities.html" class="nav-item">活动列表</a>
                    <a href="discover.html" class="nav-item">发现</a>
                    <a href="about.html" class="nav-item">关于我们</a>
                </nav>
                
                <!-- 用户操作 -->
                <div class="flex items-center space-x-4">
                    <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-search text-info"></i>
                    </button>
                    <div class="relative" id="notificationsContainer">
                        <button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all relative">
                            <i class="fa fa-bell text-info"></i>
                            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                        </button>
                        <!-- 消息通知面板 -->
                        <div id="notificationsPanel" class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg z-50 hidden opacity-0 transform translate-y-2 transition-all duration-200 ease-in-out">
                            <div class="p-3 border-b border-gray-100 flex justify-between items-center">
                                <h3 class="font-medium text-sm">通知消息</h3>
                                <span class="text-xs text-primary cursor-pointer hover:underline">全部标为已读</span>
                            </div>
                            <div class="max-h-96 overflow-y-auto">
                                <!-- 未读消息项 -->
                                <div class="p-3 border-b border-gray-100 bg-blue-50 hover:bg-blue-100 transition-all">
                                    <div class="flex items-start space-x-3">
                                        <div class="w-2 h-2 rounded-full bg-primary mt-1.5"></div>
                                        <div class="flex-1">
                                            <p class="text-sm font-medium">活动报名成功</p>
                                            <p class="text-xs text-gray-500 mt-1">您已成功报名"2023年校园文化艺术节"活动</p>
                                            <p class="text-xs text-gray-400 mt-1">10分钟前</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-3 border-b border-gray-100 bg-blue-50 hover:bg-blue-100 transition-all">
                                    <div class="flex items-start space-x-3">
                                        <div class="w-2 h-2 rounded-full bg-primary mt-1.5"></div>
                                        <div class="flex-1">
                                            <p class="text-sm font-medium">活动即将开始</p>
                                            <p class="text-xs text-gray-500 mt-1">"学术前沿讲座系列"将在明天 14:00 开始</p>
                                            <p class="text-xs text-gray-400 mt-1">2小时前</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-3 border-b border-gray-100 bg-blue-50 hover:bg-blue-100 transition-all">
                                    <div class="flex items-start space-x-3">
                                        <div class="w-2 h-2 rounded-full bg-primary mt-1.5"></div>
                                        <div class="flex-1">
                                            <p class="text-sm font-medium">系统通知</p>
                                            <p class="text-xs text-gray-500 mt-1">您的账号已完成安全认证</p>
                                            <p class="text-xs text-gray-400 mt-1">昨天 15:30</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- 已读消息 -->
                                <div class="p-3 border-b border-gray-100 hover:bg-gray-50 transition-all">
                                    <div class="flex items-start space-x-3">
                                        <div class="w-2 h-2 rounded-full bg-gray-300 mt-1.5"></div>
                                        <div class="flex-1">
                                            <p class="text-sm font-medium">新活动推荐</p>
                                            <p class="text-xs text-gray-500 mt-1">校园运动会开始报名了，快来参加吧！</p>
                                            <p class="text-xs text-gray-400 mt-1">2天前</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3 bg-gray-50 text-center">
                                <a href="#" class="text-sm text-primary hover:underline">查看全部消息</a>
                            </div>
                        </div>
                    </div>
                    <div id="userMenu" class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg transition-all">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                            <span class="hidden md:inline-block font-medium">游客</span>
                            <i class="fa fa-caret-down text-xs text-info"></i>
                        </button>
                        <!-- 用户下拉菜单 -->
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <!-- 个人信息卡片 -->
                            <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
                                <div class="flex items-center space-x-3">
                                    <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                    <div>
                                        <p class="font-medium text-sm">游客</p>
                                        <p class="text-xs text-gray-500">未登录用户</p>
                                    </div>
                                </div>
                            </div>
                            <a href="profile.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-o mr-2 text-info"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-list-alt mr-2 text-info"></i>我的活动
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-star-o mr-2 text-info"></i>我的收藏
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-cog mr-2 text-info"></i>设置
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-sign-in mr-2 text-info"></i>登录
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-plus mr-2 text-info"></i>注册
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all text-gray-600" id="logoutBtn">
                                <i class="fa fa-sign-out mr-2 text-gray-400"></i>退出
                            </a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                        <i class="fa fa-bars text-info"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="searchBox" class="container mx-auto px-4 pb-4 hidden">
            <div class="relative">
                <input type="text" placeholder="搜索活动、主办方..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden container mx-auto px-4 pb-4 hidden">
            <nav class="flex flex-col space-y-1">
                <a href="index.html" class="nav-item nav-item-active">首页</a>
                <a href="activities.html" class="nav-item">活动列表</a>
                <a href="discover.html" class="nav-item">发现</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <div class="pt-2 flex space-x-2">
                    <a href="login.html" class="btn-primary flex-1 text-center">登录</a>
                    <a href="register.html" class="btn-secondary flex-1 text-center">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 轮播图 -->
        <section class="relative overflow-hidden rounded-2xl shadow-md mb-10" style="height: 400px;">
            <div class="carousel-container h-full">
                <div class="carousel-item active absolute inset-0 transition-opacity duration-1000">
                    <img src="https://picsum.photos/id/1033/1200/400" alt="校园活动" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-r from-dark/70 to-transparent flex items-center">
                        <div class="px-8 md:px-16 max-w-lg">
                            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">2023年校园文化艺术节</h2>
                            <p class="text-white/80 mb-6">展示才华，绽放青春！一年一度的校园文化艺术节盛大开幕，期待你的参与。</p>
                            <div class="flex space-x-4">
                                <a href="activity-detail.html" class="btn-primary">立即查看</a>
                                <a href="register.html" class="btn-secondary bg-white/20 text-white border-white/30 hover:bg-white/30">我要报名</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item absolute inset-0 transition-opacity duration-1000 opacity-0">
                    <img src="https://picsum.photos/id/1035/1200/400" alt="学术讲座" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-r from-dark/70 to-transparent flex items-center">
                        <div class="px-8 md:px-16 max-w-lg">
                            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">学术前沿讲座系列</h2>
                            <p class="text-white/80 mb-6">邀请知名教授分享前沿学术知识，拓展学生视野，激发创新思维。</p>
                            <div class="flex space-x-4">
                                <a href="activity-detail.html" class="btn-primary">立即查看</a>
                                <a href="register.html" class="btn-secondary bg-white/20 text-white border-white/30 hover:bg-white/30">我要报名</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item absolute inset-0 transition-opacity duration-1000 opacity-0">
                    <img src="https://picsum.photos/id/1036/1200/400" alt="体育赛事" class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-r from-dark/70 to-transparent flex items-center">
                        <div class="px-8 md:px-16 max-w-lg">
                            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">校园运动会</h2>
                            <p class="text-white/80 mb-6">展现青春活力，弘扬体育精神，让我们一起在运动场上挥洒汗水！</p>
                            <div class="flex space-x-4">
                                <a href="activity-detail.html" class="btn-primary">立即查看</a>
                                <a href="register.html" class="btn-secondary bg-white/20 text-white border-white/30 hover:bg-white/30">我要报名</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播控制 -->
            <button class="carousel-prev absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all">
                <i class="fa fa-angle-left text-xl"></i>
            </button>
            <button class="carousel-next absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all">
                <i class="fa fa-angle-right text-xl"></i>
            </button>
            <!-- 轮播指示器 -->
            <div class="carousel-indicators absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
                <button class="w-2 h-2 rounded-full bg-white opacity-100"></button>
                <button class="w-2 h-2 rounded-full bg-white opacity-50"></button>
                <button class="w-2 h-2 rounded-full bg-white opacity-50"></button>
            </div>
        </section>

        <!-- 快速入口 -->
        <section class="mb-12">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <a href="activities.html?type=academic" class="bg-white rounded-xl shadow-sm p-6 text-center card-hover">
                    <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-book text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-medium">学术活动</h3>
                    <p class="text-xs text-info mt-1">讲座、研讨会</p>
                </a>
                <a href="activities.html?type=culture" class="bg-white rounded-xl shadow-sm p-6 text-center card-hover">
                    <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-music text-purple-500 text-2xl"></i>
                    </div>
                    <h3 class="font-medium">文化艺术</h3>
                    <p class="text-xs text-info mt-1">演出、展览</p>
                </a>
                <a href="activities.html?type=sports" class="bg-white rounded-xl shadow-sm p-6 text-center card-hover">
                    <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-futbol-o text-green-500 text-2xl"></i>
                    </div>
                    <h3 class="font-medium">体育活动</h3>
                    <p class="text-xs text-info mt-1">运动会、比赛</p>
                </a>
                <a href="activities.html?type=social" class="bg-white rounded-xl shadow-sm p-6 text-center card-hover">
                    <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-users text-orange-500 text-2xl"></i>
                    </div>
                    <h3 class="font-medium">社会实践</h3>
                    <p class="text-xs text-info mt-1">志愿、调研</p>
                </a>
            </div>
        </section>

        <!-- 热门活动 -->
        <section class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">热门活动</h2>
                <a href="activities.html?hot=true" class="text-primary hover:text-primary/80 flex items-center">
                    查看更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 活动卡片 1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1019/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-primary/90 text-white">热门</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">第12届校园科技创新大赛</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 科技学院</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-11-20</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">展示学生科技创新成果，促进学术交流与合作，激发创新思维。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 28</span>
                                <span class="text-xs text-info ml-1">/ 100人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <!-- 活动卡片 2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1025/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-warning/90 text-white">新活动</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">校园春季运动会</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 体育部</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-05</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">展现学生体育风采，增强体质，培养团队精神和竞争意识。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 156</span>
                                <span class="text-xs text-info ml-1">/ 500人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <!-- 活动卡片 3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1031/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">校园歌手大赛总决赛</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 学生会</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-15</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">见证校园歌王的诞生，享受一场视听盛宴，为你喜欢的选手加油助威！</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 0</span>
                                <span class="text-xs text-info ml-1">/ 300人</span>
                            </div>
                            <button class="bg-gray-200 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">已报满</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 近期活动 -->
        <section class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">近期活动</h2>
                <a href="activities.html" class="text-primary hover:text-primary/80 flex items-center">
                    查看更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 近期活动卡片 1 -->
                <a href="activity-detail.html" class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1039/400/200" alt="活动封面" class="w-full h-36 object-cover">
                    <div class="p-4">
                        <h3 class="font-medium mb-2 line-clamp-1">大数据技术讲座</h3>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 12-10</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-map-marker mr-1"></i> 学术报告厅</span>
                        </div>
                    </div>
                </a>
                <!-- 近期活动卡片 2 -->
                <a href="activity-detail.html" class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1040/400/200" alt="活动封面" class="w-full h-36 object-cover">
                    <div class="p-4">
                        <h3 class="font-medium mb-2 line-clamp-1">书法作品展</h3>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 12-12</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-map-marker mr-1"></i> 艺术馆</span>
                        </div>
                    </div>
                </a>
                <!-- 近期活动卡片 3 -->
                <a href="activity-detail.html" class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1041/400/200" alt="活动封面" class="w-full h-36 object-cover">
                    <div class="p-4">
                        <h3 class="font-medium mb-2 line-clamp-1">志愿者招募</h3>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 12-15</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-map-marker mr-1"></i> 学生活动中心</span>
                        </div>
                    </div>
                </a>
                <!-- 近期活动卡片 4 -->
                <a href="activity-detail.html" class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1042/400/200" alt="活动封面" class="w-full h-36 object-cover">
                    <div class="p-4">
                        <h3 class="font-medium mb-2 line-clamp-1">创业分享会</h3>
                        <div class="flex items-center text-xs text-info">
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 12-18</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-map-marker mr-1"></i> 创业园</span>
                        </div>
                    </div>
                </a>
            </div>
        </section>

        <!-- 数据统计 -->
        <section class="mb-12">
            <div class="bg-white rounded-xl p-6 shadow-sm">
                <h2 class="text-2xl font-bold mb-6">活动数据</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-6">
                    <div class="text-center">
                        <div class="text-4xl font-bold text-primary mb-2" id="totalActivities">156</div>
                        <p class="text-sm text-info">累计活动</p>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-secondary mb-2" id="totalParticipants">3,892</div>
                        <p class="text-sm text-info">参与人次</p>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-success mb-2" id="totalOrganizers">42</div>
                        <p class="text-sm text-info">主办方</p>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-warning mb-2" id="ongoingActivities">28</div>
                        <p class="text-sm text-info">进行中</p>
                    </div>
                </div>
                <div class="h-64">
                    <canvas id="activityChart"></canvas>
                </div>
            </div>
        </section>

        <!-- 合作方 -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold mb-6">合作单位</h2>
            <div class="bg-white rounded-xl p-6 shadow-sm">
                <div class="flex flex-wrap items-center justify-center gap-8 md:gap-12">
                    <div class="grayscale hover:grayscale-0 transition-all opacity-70 hover:opacity-100">
                        <i class="fa fa-university text-4xl text-gray-400"></i>
                        <p class="mt-2 text-sm text-info">黄淮学院</p>
                    </div>
                    <div class="grayscale hover:grayscale-0 transition-all opacity-70 hover:opacity-100">
                        <i class="fa fa-building text-4xl text-gray-400"></i>
                        <p class="mt-2 text-sm text-info">学生会</p>
                    </div>
                    <div class="grayscale hover:grayscale-0 transition-all opacity-70 hover:opacity-100">
                        <i class="fa fa-graduation-cap text-4xl text-gray-400"></i>
                        <p class="mt-2 text-sm text-info">社团联合会</p>
                    </div>
                    <div class="grayscale hover:grayscale-0 transition-all opacity-70 hover:opacity-100">
                        <i class="fa fa-heartbeat text-4xl text-gray-400"></i>
                        <p class="mt-2 text-sm text-info">校团委</p>
                    </div>
                    <div class="grayscale hover:grayscale-0 transition-all opacity-70 hover:opacity-100">
                        <i class="fa fa-futbol-o text-4xl text-gray-400"></i>
                        <p class="mt-2 text-sm text-info">体育部</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">黄淮学院</h3>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">校园活动管理系统致力于为全校师生提供便捷的活动信息服务平台。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-all">首页</a></li>
                        <li><a href="activities.html" class="hover:text-white transition-all">活动列表</a></li>
                        <li><a href="discover.html" class="hover:text-white transition-all">发现</a></li>
                        <li><a href="about.html" class="hover:text-white transition-all">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-white transition-all">常见问题</a></li>
                        <li><a href="contact.html" class="hover:text-white transition-all">联系我们</a></li>
                        <li><a href="privacy.html" class="hover:text-white transition-all">隐私政策</a></li>
                        <li><a href="terms.html" class="hover:text-white transition-all">用户协议</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>河南省驻马店市开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>0396-2853611</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-white/10 text-center text-gray-500 text-sm">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 轮播图功能实现
        document.addEventListener('DOMContentLoaded', function() {
            const carouselItems = document.querySelectorAll('.carousel-item');
            const indicators = document.querySelectorAll('.carousel-indicators button');
            const prevBtn = document.querySelector('.carousel-prev');
            const nextBtn = document.querySelector('.carousel-next');
            let currentIndex = 0;
            let interval;

            // 显示当前轮播项
            function showSlide(index) {
                // 隐藏所有轮播项
                carouselItems.forEach(item => {
                    item.classList.remove('active');
                    item.classList.add('opacity-0');
                });
                // 更新指示器
                indicators.forEach((indicator, i) => {
                    if (i === index) {
                        indicator.classList.add('opacity-100');
                        indicator.classList.remove('opacity-50');
                    } else {
                        indicator.classList.add('opacity-50');
                        indicator.classList.remove('opacity-100');
                    }
                });
                // 显示当前轮播项
                carouselItems[index].classList.add('active');
                carouselItems[index].classList.remove('opacity-0');
            }

            // 下一张
            function nextSlide() {
                currentIndex = (currentIndex + 1) % carouselItems.length;
                showSlide(currentIndex);
            }

            // 上一张
            function prevSlide() {
                currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
                showSlide(currentIndex);
            }

            // 自动轮播
            function startAutoPlay() {
                interval = setInterval(nextSlide, 5000); // 每5秒切换一次
            }

            // 停止自动轮播
            function stopAutoPlay() {
                clearInterval(interval);
            }

            // 初始化
            showSlide(currentIndex);
            startAutoPlay();

            // 事件监听
            nextBtn.addEventListener('click', function() {
                stopAutoPlay();
                nextSlide();
                startAutoPlay();
            });

            prevBtn.addEventListener('click', function() {
                stopAutoPlay();
                prevSlide();
                startAutoPlay();
            });

            // 点击指示器切换轮播
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', function() {
                    stopAutoPlay();
                    currentIndex = index;
                    showSlide(currentIndex);
                    startAutoPlay();
                });
            });

            // 鼠标悬停时停止自动轮播
            const carouselContainer = document.querySelector('.carousel-container');
            carouselContainer.addEventListener('mouseenter', stopAutoPlay);
            carouselContainer.addEventListener('mouseleave', startAutoPlay);
        });

        // 用户下拉菜单交互和消息通知面板
        document.addEventListener('DOMContentLoaded', function() {
            const userMenuBtn = document.getElementById('userMenuBtn');
            const userDropdown = document.getElementById('userDropdown');
            const logoutBtn = document.getElementById('logoutBtn');
            const notificationsBtn = document.getElementById('notificationsBtn');
            const notificationsPanel = document.getElementById('notificationsPanel');
            const notificationsContainer = document.getElementById('notificationsContainer');
            
            // 消息通知面板悬停显示
                if (notificationsContainer && notificationsPanel) {
                    // 消息通知面板悬停显示（带动画效果）
                    notificationsContainer.addEventListener('mouseenter', function() {
                        notificationsPanel.classList.remove('hidden');
                        // 使用setTimeout确保hidden类被移除后再应用动画
                        setTimeout(() => {
                            notificationsPanel.classList.add('opacity-100');
                            notificationsPanel.classList.remove('opacity-0', 'translate-y-2');
                        }, 10);
                    });
                    
                    notificationsContainer.addEventListener('mouseleave', function() {
                        // 先应用淡出动画
                        notificationsPanel.classList.remove('opacity-100');
                        notificationsPanel.classList.add('opacity-0', 'translate-y-2');
                        // 动画完成后再隐藏元素
                        setTimeout(() => {
                            notificationsPanel.classList.add('hidden');
                        }, 200);
                    });
                }
            
            // 切换下拉菜单显示
            if (userMenuBtn && userDropdown) {
                userMenuBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    userDropdown.classList.toggle('hidden');
                    // 确保通知面板关闭
                    if (notificationsPanel) {
                        notificationsPanel.classList.add('hidden');
                    }
                });
                
                // 点击页面其他地方关闭下拉菜单和通知面板
            document.addEventListener('click', function(e) {
                // 关闭用户下拉菜单
                if (userDropdown && !userDropdown.classList.contains('hidden')) {
                    userDropdown.classList.add('hidden');
                }
                
                // 关闭通知面板（带动画效果）
                if (notificationsPanel && !notificationsPanel.classList.contains('hidden') && 
                    notificationsContainer && !notificationsContainer.contains(e.target)) {
                    // 先应用淡出动画
                    notificationsPanel.classList.remove('opacity-100');
                    notificationsPanel.classList.add('opacity-0', 'translate-y-2');
                    // 动画完成后再隐藏元素
                    setTimeout(() => {
                        notificationsPanel.classList.add('hidden');
                    }, 200);
                }
            });
                
                // 阻止下拉菜单内部点击事件冒泡
                userDropdown.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
            
            // 退出按钮点击事件
            if (logoutBtn) {
                logoutBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (confirm('确定要退出登录吗？')) {
                        // 这里可以添加实际的退出登录逻辑
                        alert('您已退出登录');
                        // 可以重定向到登录页面或执行其他操作
                        // window.location.href = 'login.html';
                    }
                });
            }
        });
    </script>
</body>
</html>